import React, { useEffect, useState } from 'react';
import styles from './style/index.module.less';
import { Table, Select, TableColumnProps, Card, Space, Button,Drawer, Notification  } from '@arco-design/web-react';
import { useLocation } from 'react-router-dom';
import {Compare} from '../../../wailsjs/go/main/App'

import { ReadOneSync } from '@/store/sync';
import { ReadOneDatasource } from '@/store/datasource';
import Step0 from './step0';
import Step1 from './step1';
import Step2 from './step2';

function SyncPage() {
  const [step,setStep] = useState(0)
  const [input,setInput] = useState({})
  const [compareRes,setCompareRes] = useState({})

  const [loading,setLoading] = useState(false)
  function useQuery() {
    return new URLSearchParams(useLocation().search);
  }
  const query = useQuery()
  const id = query.get('id')

  const next = ()=>{
   
    if(step==0){
      setLoading(true)
      Compare(input).then((res)=>{
        if(!res.ok){
          Notification.warning({content:res.message,position:'bottomLeft'} );
          return
        }
        setCompareRes(res)
        setStep(1)
      })
      .finally(()=>{
        setLoading(false)
      })
    }else if (step==1){
      setStep(2) 
    }
  }
  const exec = ()=>{
    setStep(3) 
  }  
  
  const reCompare = ()=>{
    setStep(0) 
  }
  
  useEffect(() => {
    let sync = ReadOneSync(id)
    let from = ReadOneDatasource(sync.from)
    let to =  ReadOneDatasource(sync.to)
    let input = {
      from,
      to,
    }
    console.log('input',input)
    setInput(input)
  }, []);
  
  return (
    <div className={styles.container}>
      <Card style={{ width: '100%' }} title='同步表结构' extra={
        <Space>
          {step==0 || step==1 ? <Button loading={loading} size='small' type='primary' onClick={next}>下一步</Button> : ''}
          {step==2 ? <Button loading={loading} size='small' type='primary' onClick={exec}>执行SQL</Button> : ''}
          {step==3 ? <Button loading={loading} size='small' onClick={reCompare}>重新对比</Button> : ''}
        </Space>
      }>
        {step==0 ? <Step0 input={input} /> : ''}
        {step==1 ? <Step1 compareRes={compareRes} /> : ''}
        {step==2 ? <Step2 id={id} /> : ''}
      </Card>
    </div>
  );
}

export default SyncPage;
